*{
    margin: 0;
    padding: 0;
}
html{
    perspective: 800px;
}
/* html{
    font-size: 40px;
} */
div{
    width: 100vw;
    height: 100vh; 
    
    animation: A 3s; 
    display: flex;
    justify-content: center;
    align-items: center;
    animation-fill-mode: forwards;
    background-color: aqua;
}
div a{
    font-size: 3em;
    color: white;
    text-decoration: none;
    opacity: 0;
    animation: B 2S 3S;
    animation-fill-mode: forwards;
}
  @keyframes B{
      to{
          opacity: 1;
      }
  }
  
@keyframes A{
    0%{
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
        transform: scale(1) rotateZ(360deg) translate3d(50px);
    
    }
25%{
    background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
    transform: scale(0.5) rotateY(360deg) ;
    border-radius: 50%;
}
50%{
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
   
    transform: scale(1) rotateY(360deg) translate3d(2.5rem);
    
}
75%{
    background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  
    transform: scale(0.5)rotateX(360deg) translate3d(2.5rem);
    border-radius: 50%;
}
100%{
    background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
    
    transform: scale(1) rotateZ(360deg) translate3d(2.5rem);
    
}
}